<template>
  <el-header style="text-align: right; font-size: 12px">
    <div class="toolbar">
      <el-dropdown>
        <el-icon style="margin-right: 8px; margin-top: 1px"
          ><setting
        /></el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="userQuite">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span>{{ userInfo?.adminname }}</span>
    </div>
  </el-header>
</template>

<script>
import { Menu as Setting } from "@element-plus/icons-vue";
import { mapState, mapMutations } from "vuex";
export default {
  // 由于页面上的数据显示依赖的是vuex的state
  // 但是页面一旦刷新，vuex中的数据就会丢失
  // 因为我们数据的获取是通过login接口的，刷新以后并没有重新调用接口
  // 而刷新又会让页面重载，所以vuex中的数据就丢失了
  // vuex当中的数据，是给程序员自己用自己看，用户要看的是本地化存储当中的数据
  created() {
    this.initPage();
  },
  methods: {
    ...mapMutations({
      cleanUserInfo: "cleanUserInfo",
      setLSUserInfo: "setLSUserInfo",
    }),
    initPage() {
      const ls = JSON.parse(localStorage.getItem("userInfo"));
      this.setLSUserInfo(ls);
    },
    userQuite() {
      this.cleanUserInfo({});
      this.$router.push("/");
    },
  },
  computed: {
    ...mapState({
      userInfo: "userInfo",
    }),
  },
  components: {
    Setting,
  },
};
</script>

<style></style>
